<!--用车申请页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">商品列表</span>
    <el-button type="primary" style="float:right;margin-top:13px;">添加商品</el-button>
  </div>
  <!-- 申请用车弹窗 -->
  <el-dialog title="添加商品" v-model="addApplicationDialogVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input placeholder="请输入商品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品库存">
            <el-input placeholder="请输入商品库存"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商品ID">
            <el-input placeholder="请输入商品ID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品分类">
            <el-input placeholder="请输入商品类别"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商品价格">
            <el-input placeholder="请输入商品价格"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="录入日期">
            <el-date-picker
                type="datetime"
                start-placeholder="录入日期"
                value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商品状态">
            <el-input placeholder="请输入商品状态"></el-input>
          </el-form-item>
        </el-col>
      <el-col :span="12">
        <el-form-item label="商品介绍">
          <el-input placeholder="请输入" type="textarea" resize="none" :rows="3"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="商品图片">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="actionUrl"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </template>
  </el-dialog>

  <!-- 用车申请列表 搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="选择分类">
            <el-select placeholder="商品类目">
                <el-select placeholder="食品类">
                  <el-option label="休闲食品" value="10"></el-option>
                  <el-option label="冲调饮品" value="20"></el-option>
                </el-select>
              <el-select placeholder="生鲜类">
                <el-option label="熟食组" value="30"></el-option>
                <el-option label="海鲜组" value="40"></el-option>
              </el-select>
              <el-option label="其他" value="50"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="商品名称">
            <el-input placeholder="请输入要搜索的商品名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="ID">
            <el-input placeholder="请输入要搜索的商品ID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button>重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 用车申请表格 -->
  <el-card style="margin:20px">
    <el-table>
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="username" label="商品ID"></el-table-column>
      <el-table-column align="center" prop="departureAddr" label="商品名称"></el-table-column>
      <el-table-column align="center" prop="destinationAddr" label="图片"></el-table-column>
      <el-table-column align="center" prop="price " label="价格"></el-table-column>
      <el-table-column align="center" prop="reason" label="分类"></el-table-column>
      <el-table-column align="center" prop="auditUsernameList" label="库存"></el-table-column>
      <el-table-column align="center" prop="startTime" label="录入日期"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link>查看编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
//定义变量控制创建申请单弹窗是否出现
const addApplicationDialogVisible = ref(true);

</script>

<style scoped>
</style>